使用Glide加载图片系列之一从不同的数据源加载图片

与其他图片加载库相同,Glide除了可以加载网络图片之外,也可以加载本地图片。甚至还可以从各种各样奇葩的数据源中加载图片。

加载网络图片

很多情况下,我们使用图片加载库就是为了加载网络图片。网络操作是一个很复杂的东西。试想一下,如果没有图片加载库,我们就要手动去下载图片,缓存图片,最后再从文件里面读取bitmap并设置到Imageview里面。这还算好的,要是在Listview里面你会更头疼的。原因我就不说了,你懂的~~再加上各种各样的Bitmap操作,保准你再也不想撸代码了。而且Bitmap这东西还很占内存,伺候不好,很容易就会引发OOM,app吧唧就闪退了!!

图片加载库的优势就在于此。简简单单一句话,下载,缓存,加载统统搞定。简直就是美好一生的东西。而Glide就是这样使人美好一生的东西之一。

说了这么多,Glide如何加载网络图片?很简单,就上次的三句话:

ImageView targetImageView = (ImageView) findViewById(R.id.imageView);
String internetUrl = "http://i.imgur.com/idojSYm.png";
Glide
    .with(context)
    .load(internetUrl)
    .into(targetImageView);

木有什么乱七八糟的东西,直接传入要加载图片的url就可以了。那么图片加载库有很多,为什么选择Glide呢?很简单,因为它流畅,不卡,尤其是在Listview中。嗯,就是酱~

加载本地图片

下表是.load()可以传入的参数及说明

参数 说明
.load(String string) string可以为一个文件路径、uri或者url
.load(Uri uri) uri类型
.load(File file) 文件
.load(Integer resourceId) 资源Id,R.drawable.xxx或者R.mipmap.xxx
.load(byte[] model) byte[]类型
.load(T model) 自定义类型

从上面可以看到Glide不仅可以加载网络图片,还可以加载本地图片。可接受的参数有文件路径,uri,文件,资源id等。基本上满足了大部分的需求。虽然加载本地图片不像网络图片那样复杂,但我还是建议使用Glide来加载本地图片。因为它是内存友好的,而且还会“偷偷地”帮我们做很多事情。比如内存缓存,Bitmap复用,修正照片方向等。当然为了满足各种各样的需求,仅仅加载图片是不够的,你还需要对图片进行各种各样的变换,也就是Transformation。后面我们会详细了解的。

加载自定义数据源

前面的表格中有一个是我们不熟悉的,就是.load(T model),即自定义的数据源类型。那么如何去实现呢?

实际上,加载自定义数据源主要是通过ModelLoader接口来实现的。由于没有在实际项目中用到过,这方面的经验比较少。想深入了解的,可以参考这篇文章

不过从官方Wiki上来看,设计ModelLoader接口的初衷用来加载不同尺寸的图片的。众所周知,Android设备屏幕分辨率千奇百怪,大到2K,小到320p。如果在低分辨率的手机上加载大图,不仅损耗用户流量,而且很容易造成OOM;在高分辨的手机上,加载小图又会出现模糊的情况,用户体验极差。很多时候,为了省事,很多app都会选择一个中间分辨率,然后自适应大小。当然这样做无可厚非,但是有更好的办法,我们为什么不去尝试呢?

那么如何使用Glide来实现这一具体需求呢?首先你要实现自己的ModelLoader,比较简单的方法是继承BaseGlideUrlLoader

public interface MyDataModel {
    public String buildUrl(int width, int height);
} 
public class MyUrlLoader extends BaseGlideUrlLoader<MyDataModel> {
    @Override
    protected String getUrl(MyDataModel model, int width, int height) {
        // Construct the url for the correct size here.
        return model.buildUrl(width, height);
    }
}

接下来我们可以这样来加载图片:

Glide.with(this)
     .using(new MyUrlLoader(this))
     .load(new MyDataModel() {
          @Override
          public String buidUrl(int width, int height) {
              if (width >= 600) {
                  return url1;
              } else {
                  return url2;
                }
          }
      })
     .into(imageView);

.using(new MyUrlLoader(this)):使用我们自己的ModeLoader;
.load(new MyDataModel()):加载我们自定义的数据源

这里需要解释下getUrl的三个参数:
model:你加载的数据源
width:你加载的图片的宽度(px)
height:你加载的图片的高度(px)

这样,我们在高分率的设备上加载大图的url1,在低分辨率的设备上加载小图url2。从而实现了根据不同手机上的像素值大小加载不同尺寸的图片的需求。

当然如果你不想每次都是用.using(new MyUrlLoader()),就需要实现一个自定义的ModelLoaderFactory并在GlideModule中注册。

public class MyGlideModule implements GlideModule {
    ...
    @Override
    public void registerComponents(Context context, Glide glide) {
        glide.register(MyDataModel.class, InputStream.class, 
            new MyUrlLoader.Factory());
    }
}

同时也要在AndroidManifest.xml声明

<meta-data
    android:name="com.mypackage.MyGlideModule"
    android:value="GlideModule" />

如果你有多个自定义的GlideModule类,那么也要在AndroidManifest.xml中声明多个GlideModule。

对于上面的加载不同尺寸的图片,Google的2014年I/O大会App中有一篇文章专门用来介绍这个的,地址在这里。大概原理是这样子的:

在服务端有下面的几个可以加载的url:

URL 图片大小
myserver.com/images/__w-200-400-600-800-1000__/session1.jpg 原始尺寸
myserver.com/images/w200/session1.jpg 200px
myserver.com/images/w400/session1.jpg 400px
myserver.com/images/w600/session1.jpg 600px
myserver.com/images/w800/session1.jpg 800px
myserver.com/images/w1000/session1.jpg 1000px

那么客户端如何根据不同的手机分辨率去加载不同的url呢?

Google是这样做的,下面是核心代码:

//定义正则表达式
private static final Pattern PATTERN =
      Pattern.compile("__w-((?:-?\\d+)+)__");

@Override
protected String getUrl(String model, int width, int height) {
    Matcher m = PATTERN.matcher(model);
    int bestBucket = 0;
    if (m.find()) {
        String[] found = m.group(1).split("-");//拿到可以加载的尺寸数组
        for (String bucketStr : found) {
            bestBucket = Integer.parseInt(bucketStr);
            if (bestBucket >= width) {//刚好大于要加载的尺寸,直接跳出循环
                // the best bucket is the first immediately
                // bigger than the requested width
                break;
            }
        }
        if (bestBucket > 0) {//返回合适尺寸的url
            model = m.replaceFirst("w"+bestBucket);
        }
    }
    return model;
}

大概的步骤如下:
1.根据服务端可加载的图片url定义正则表达式
2.根据正则匹配,获取到可以加载的图片尺寸数组
3.根据要加载的Imageview的大小,选择合适的尺寸的url
4.拼接url并返回

上面的例子中有200,400,600,800,1000是可以加载的,如果你要加载的Imageview的大小为600px,当遍历数组到600时,就会直接跳出循环,返回600px大小图片的url,Glide就会加载600px的图片。

最后送上一个小demo:https://github.com/Alluretears/GldieDemo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容